import React from 'react';
import { Container, Typography, Box, Button } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';

const HomePage: React.FC = () => {
  const { isAuthenticated } = useAuth();
  const navigate = useNavigate();

  const handleGetStarted = () => {
    // 根据项目需求，用户无需登录即可玩游戏
    navigate('/lobby');
  };

  return (
    <Container maxWidth="md">
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          height: '80vh',
          textAlign: 'center'
        }}
      >
        <Typography variant="h2" component="h1" gutterBottom>
          德州扑克在线游戏
        </Typography>
        <Typography variant="h5" component="h2" gutterBottom color="textSecondary">
          与全球玩家一起享受最经典的扑克游戏
        </Typography>
        <Box sx={{ mt: 4 }}>
          <Button
            variant="contained"
            size="large"
            onClick={handleGetStarted}
            sx={{ mr: 2 }}
          >
            开始游戏
          </Button>
          {!isAuthenticated && (
            <Button
              variant="outlined"
              size="large"
              onClick={() => navigate('/register')}
            >
              注册账户
            </Button>
          )}
        </Box>
      </Box>
    </Container>
  );
};

export default HomePage;